<script setup>
  import {
    hotCityList,
    citySearch,
    getIp
  } from './api.js'
  import {
    ref,
    getCurrentInstance
  } from 'vue'
  import {
    onLoad
  } from '@dcloudio/uni-app'
  const {
    proxy
  } = getCurrentInstance()
  const keyword = ref('')
  const popularCities = ref([])
  const cityResult = ref([])
  const city = ref("")
  const isRepositioning = ref(false)
  onLoad(() => {
    hotCityListApi()
    const cityRegeo = uni.getStorageSync('cityRegeo')
    if (cityRegeo) {
      if (cityRegeo.district && cityRegeo.district.length) {
        city.value = cityRegeo.district
      } else if (cityRegeo.city && cityRegeo.city.length) {
        city.value = cityRegeo.city
      } else if (cityRegeo.district && cityRegeo.district.length) {
        city.value = cityRegeo.district
      } else {
        city.value = '重新定位'
      }
    } else {
      city.value = '重新定位'
    }
  })

  function onCustom() {
    uni.navigateBack()
  }
  const userIp = ref("")
  const cityDate = ref({})
  const oncity = (async () => {
    isRepositioning.value = true
    const res = await getIp()
    if (res && res.code == 1) {
      userIp.value = res.data.ip
      cityDate.value = res.data
      city.value = res.city
      uni.setStorageSync("cityRegeo", res.data)
      uni.setStorageSync("currentLocation", JSON.stringify(cityDate.value))
      proxy.$getLocation(cityDate.value)
      isRepositioning.value = false
      uni.reLaunch({
        url: `/pages/index/index?cityList=${JSON.stringify(cityDate.value)}`
      })
    } else {
      isRepositioning.value = false
      userIp.value = res.data.ip
      proxy.$geocodeIpRegeo(res.data.ip).then(async (ele) => {
        cityDate.value = ele
        uni.setStorageSync("currentLocation", JSON.stringify(ele))
        city.value = ele.city
      })
      uni.reLaunch({
        url: `/pages/index/index?cityList=${JSON.stringify(cityDate.value)}`
      })
    }
  })



  function contentActive(item) {
    const cityCache = uni.getStorageSync('cityCache')
    if (cityCache) {
      if (cityCache.findIndex((e) => e.adcode == item.adcode) !== -1) {
        return 'content-active'
      } else {
        return ''
      }
    }
  }

  function onweather(item) {
    uni.navigateTo({
      url: `/pages/index/test?cityList=${JSON.stringify(item)}`
    })
  }

  function addCity(item) {
    proxy.$getLocation(item)
    uni.navigateTo({
      url: `/pages/index/index?cityList=${JSON.stringify(item)}`
    })
  }
  const onCitySearch = (async (e) => {
    keyword.value = e
    const res = await citySearch({
      name: e
    })
    if (res && res.code == 1) {
      cityResult.value = res.data
    }
  })
  const hotCityListApi = (async () => {
    const res = await hotCityList()
    if (res && res.code == 1) {
      popularCities.value = res.data
    }
  })
</script>
<template>
  <view class="city-search">
    <up-search placeholder="搜索城市" actionText="取消" v-model="keyword" @custom="onCustom"
      @change="onCitySearch"></up-search>
  </view>
  <view class="city-main" v-if="!keyword">
    <view class="city-text">{{city !=="重新定位"? '当前位置':'当前暂未获取到定位信息'}}</view>
    <view class="city-positioning" @click="oncity">
      <template v-if="!isRepositioning">
        <image src="@/static/icon/current.png" mode="heightFix"></image>
        <view class="city-name">{{city}}</view>
      </template>
      <up-loading-icon v-else></up-loading-icon>
    </view>
    <view class="city-text">热门城市</view>
    <view class="city-list">
      <view class="list-content" :class="contentActive(item)" v-for="item,index in popularCities" :key="item.id"
        @click="onCitySearch(item.location_name)">{{item.location_name}}
      </view>
    </view>
  </view>
  <view class="city-result" v-else>
    <view class="result-list" v-for="item,index in cityResult" :key="item.id" @click="onweather(item)">
      <view class="list-city">{{item.location_name}} - {{item.adm2_name}}，{{item.adm1_name}}</view>
      <image src="@/static/icon/city-plus.png" mode="" @click.stop="addCity(item)"></image>
    </view>
  </view>
</template>


<style lang="scss" scoped>
  page {
    background-color: #fff;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .city-search {
    width: 100%;
    height: 104rpx;
    box-sizing: border-box;
    padding: 0 32rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    position: sticky;
    top: 0;
    z-index: 2;
  }

  .city-main {
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    padding: 0 40rpx;
    background-color: #fff;

    .city-text {
      font-size: 24rpx;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
      margin-top: 32rpx;
    }

    .city-positioning {
      width: 100%;
      height: 100rpx;
      border-radius: 24rpx;
      background: #EBECED;
      margin-top: 32rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      .city-name {
        font-size: 36rpx;
        font-weight: 500;
        color: rgba(38, 132, 255, 1);
      }

      image {
        height: 44rpx;
        width: 44rpx;
        margin-right: 8rpx;
      }
    }

    .city-list {
      display: flex;
      flex-wrap: wrap;
      margin-top: 32rpx;
      width: 105%;

      .list-content {
        width: 208rpx;
        height: 72rpx;
        border-radius: 280rpx;
        background: #EBECED;
        font-size: 30rpx;
        font-weight: 400;
        color: rgba(50, 50, 51, 1);
        text-align: center;
        line-height: 72rpx;
        margin: 0 24rpx 24rpx 0;
      }

      .content-active {
        color: rgba(38, 132, 255, 1);

      }
    }
  }

  .city-result {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 0 32rpx;
    margin-top: 40rpx;
    overflow: scroll;

    .result-list {
      width: 100%;
      display: flex;
      height: 72rpx;
      line-height: 72rpx;
      align-items: center;
      margin-bottom: 24rpx;

      image {
        height: 48rpx;
        width: 48rpx;
      }

      .list-city {
        flex: 1;
        font-size: 34rpx;
        font-weight: 500;
        color: rgba(50, 50, 51, 1);

      }
    }
  }
</style>